<app-landing-page-header [title]="'Global Compact'" [subTitle]="'Identify companies that breach or risk breaching the United Nation\'s Global Compact'"></app-landing-page-header>

<div class="container mt-5">
  <h4>Features</h4>
  <div class="row mt-3">
    <div class="col-md-4">
      <h5>Principles Assessment</h5>
      <div class="d-flex flex-row mt-3">
        <img src="/assets/icons-svg/icon-principles.svg" class="research-icon flex-column" />
        <span class="flex-column pl-3">Assessment of a company's involvement in controversies relative to the 10 Principles of the UN Global Compact and international
            norms.</span>
      </div>
    </div>
    <div class="col-md-4">
      <h5>Research Overlay</h5>
      <div class="d-flex flex-row mt-3">
        <img src="/assets/icons-svg/icon-overlay.svg" class="research-icon flex-column" />
        <span class="flex-column pl-3">The GCCS assessment is an impact-focused assessment overlay on top of our ESG Controversy research.</span>
      </div>

    </div>
    <div class="col-md-4">
      <h5>Coverage</h5>
      <div class="d-flex flex-row mt-3">
        <img src="/assets/icons-svg/icon-coverage.svg" class="research-icon flex-column" />
        <span class="flex-column pl-3">Expand coverage to your entire investable universe.</span>
      </div>
    </div>
  </div>

  <div *ngIf="productPermissions?.globalcompact" class="row mt-5">
    <div class="col-md-3">

        <ul class="list-group list-group-flush">
            <li class="list-group-item item-link global-compact-menu-item" (click)="loadTable(principlesOption.NonCompliantAndWatchlist)" [ngClass]="{'active': principlesOption.NonCompliantAndWatchlist === principlesSelected}">
                Non-Compliant &amp; Watchlist
            </li>
            <li class="list-group-item item-link global-compact-menu-item" (click)="loadTable(principlesOption.Watchlist)" [ngClass]="{'active': principlesOption.Watchlist === principlesSelected}">
                Watchlist
            </li>
            <li class="list-group-item item-link global-compact-menu-item" (click)="loadTable(principlesOption.NonCompliant)" [ngClass]="{'active': principlesOption.NonCompliant === principlesSelected}">
                Non-Compliant
            </li>
        </ul>

        <!--
        <input type="radio" class="row" (change)="" [checked]="" name="princip">
        <input type="radio" class="row" (change)="" name="princip"> Watchlist
        <input type="radio" class="row" (change)="" name="princip"> Non-Compliant
        -->
    </div>
    <div class="col-md-9">
      <sustainalytics-table #table [columns]="columns" [source]="source" [filter]="filter" [elementCount]="elementCount"
        [paginationPositionDisplay]="paginationPosition" [displayTitle]="false" (changed)="tableOptionsChanged($event)">
      </sustainalytics-table>
    </div>
  </div>
</div>